<template>
	<div>
		<el-container>
			<el-header >
				<div class="back" @click="back">取消</div>
				<div class="save" @click="save('uFrom')">继续</div>
			</el-header>
			<el-main>
				<div style="width: 600px;margin: 30px auto;">
					<el-form :model="uFrom" label-position="top" ref="uFrom" :rules="rules">
						<el-form-item label="游戏名称" prop="name">
							<el-input v-model="uFrom.name"></el-input>
						</el-form-item>
						<el-form-item label="游戏封面">
							<div style="display: flex;justify-content: center;">
								<el-upload
									  v-model="uFrom.ImgUrl"
									  class="upload-demo"
									  drag
									  @on-change="changURL"
									  @on-success="success"
									  action="https://jsonplaceholder.typicode.com/posts/"
									  multiple>
									  <div class="el-upload__text" style="margin-top: 65px;"><em>点击上传</em> 或 <em>拖拽</em>上传图片</div>
							   </el-upload>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				uFrom:{
					ImgUrl:'',
					name:''
				},
				rules: {
				  name: [
					{ required: true, message: '请输入游戏名称', trigger: 'blur' },
				  ],
				},
				
			}
		},
		created() {
			this.uFrom = this.$route.query
		},
		methods:{
			//保存
			back(){
				this.$router.go(-1)
			},
			changURL(file, fileList){
				console.log(file, fileList)
			},
			//上传图片
			success(file){
				console.log('图片',file)
			},
			//继续
			save(uFrom){
				console.log('uFrom',uFrom)
				this.$refs[uFrom].validate((valid) => {
					if(valid){
						this.$router.push({
							path:'/edit',
							query:{
								name:this.uFrom.name,
								ImgUrl:this.uFrom.ImgUrl
							}
						})
					} else {
						
					}
				})
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	
	.el-header{
		position: relative;
		width: 100%;
	    background-color: #ffffff;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		border-bottom: 1px solid #ebebeb;
	  }
	.save{
		 cursor: pointer;
		 width: 100px;
		 height: 40px;
		 margin-top: 8px;
		 line-height: 40px;
		 top: 0;
		 position: absolute;
		 background-color: #2eb1ff;
		 color: #FFFFFF;
		 border-radius: 3px;
		 right: 25px;
	 }
	.back{
		cursor: pointer;
		width: 100px;
		height: 40px;
		margin-top: 8px;
		line-height: 40px;
		position: absolute;
		
		border: 1px solid #d9d9d9;
		border-radius: 3px;
	}
</style>
